<template>
  <div v-if="show" class="container">
    <h1>答案统计（仅选择题）</h1>
    <div v-for="(item, index) in drawData" :key="index" :id="'myChart'+index" class="center" :style="{width: '400px', height: '300px'}"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      drawData: [],
      // 控制渲染
      show: false
    }
  },
  // 路由参数
  props: ['questionnaireId'],
  async created () {
    const { data: res } = await this.$http.get('/answer-do/statistic/' + this.questionnaireId)
    this.drawData = res.data
    console.log(this.drawData)
    this.show = true
    this.drawLine()
  },
  methods: {
    drawLine () {
      this.$nextTick(() => {
        // 基于准备好的dom，初始化echarts实例
        for (let i = 0; i < this.drawData.length; i++) {
          // 绘制图表 document.getElementById('myChart' + i)
          // 主要是不知道this.$ref.name 这个name怎么换成动态拼接的值
          this.$echarts.init(document.getElementById('myChart' + i)).setOption({
            title: { text: this.drawData[i].questionTitle },
            tooltip: {},
            xAxis: {
              type: 'category',
              data: this.drawData[i].xData,
              axisTick: {
                alignWithLabel: true
              }
            },
            yAxis: {},
            series: [{
              type: 'bar',
              data: this.drawData[i].yData
            }]
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  text-align: center;
}
.center {
  margin: 0 auto;
}
</style>
